<script setup lang="ts">
import XEUtils from 'xe-utils'
import OrgAddModal from './OrgAddPanel.vue'
import OrgDetailDrawer from './OrgDetailPanel.vue'
import CellOrgNode from './CellOrgNode.vue'
import { OrgApi } from '@/apis'
import type { TableInstanceColumns } from '@/components/ProTable/type'
import type ProTable from '@/components/ProTable/index.vue'
import { useTable } from '@/hooks'

defineOptions({ name: 'Org' })

const queryForm = reactive<OrgApi.OrgQuery>({
  parentId: undefined,
  code: undefined,
  name: undefined,
  orgType: undefined,
  status: 1,
})

const tableRef = ref<InstanceType<typeof ProTable>>()
const {
  tableData: dataList,
  loading,
  search,
} = useTable(() => OrgApi.getTree(queryForm), {
  onSuccess: () => {
    nextTick(() => {
      // 默认展开所有数据
      tableRef.value?.tableRef?.expand('0')
      // tableRef.value?.tableRef?.expandAll(true)
    })
  },
})

const columns: TableInstanceColumns[] = [
  { title: '名称', dataIndex: 'name', slotName: 'name', fixed: 'left' },
  { title: '类型', dataIndex: 'orgType', slotName: 'orgType', width: 100 },
  { title: '编码', dataIndex: 'code', slotName: 'code', width: 140 },
  { title: '负责人', dataIndex: 'leaderName', slotName: 'leaderName', width: 120, render: ({ record }) => record.leaderName || '--' },
  { title: '联系方式', dataIndex: 'telephone', slotName: 'telephone', width: 140, render: ({ record }) => record.telephone || '--' },
  { title: '状态', dataIndex: 'status', slotName: 'status', width: 100 },
]

// 只查看启用状态
const onStatusFilterChange = (value) => {
  if (value) {
    queryForm.status = 1
  } else {
    queryForm.status = undefined
  }
  search()
}

// 新增
const OrgAddModalRef = ref<InstanceType<typeof OrgAddModal>>()
const onAdd = () => {
  OrgAddModalRef.value?.onAdd()
}

// 详情
const OrgDetailDrawerRef = ref<InstanceType<typeof OrgDetailDrawer>>()
const onDetail = (item: OrgApi.OrgResp) => {
  OrgDetailDrawerRef.value?.open(item.id)
}
// 拖拽排序
const onChange = async (data, extra) => {
  if (extra.type === 'drag') {
    const parentId = extra.dragTarget.parentId
    if (parentId === '') {
      return
    }
    // 从完整数据中找到id为parentId的数据，拿到children后排序
    const parentNode = XEUtils.findTree<any, any>(data, item => item.id === parentId)
    const childrenIds = parentNode.item.children.map(item => item.id)

    try {
      const data = {
        parentId,
        childrenIds,
      }
      loading.value = true
      await OrgApi.sortOrg(data)
      search()
    } finally {
      loading.value = false
    }
  }
}
</script>

<template>
  <ProPage title="部门与校区" description="对机构下的校区和部门进行统一管理">
    <template #extra>
      <a-button v-permission="['system:org:manage']" type="primary" @click="onAdd">
        <template #icon>
          <icon-plus />
        </template>
        创建校区/部门
      </a-button>
    </template>
    <ProTable
      ref="tableRef"
      :draggable="{ type: 'handle', width: 40 }"
      :data="dataList"
      :columns="columns"
      :loading="loading"
      :pagination="false"
      :disabled-column-keys="['name']"
      @change="onChange"
      @refresh="search"
      @row-click="onDetail"
    >
      <template #toolbar-left>
        <a-input v-model="queryForm.name" placeholder="输入关键词搜索" allow-clear @change="search">
          <template #prefix>
            <icon-search />
          </template>
        </a-input>
        <a-checkbox :default-checked="true" @change="onStatusFilterChange">
          只查看启用状态
        </a-checkbox>
      </template>
      <template #expand-icon="{ expanded }">
        <icon-down v-if="expanded" />
        <icon-right v-else />
      </template>
      <template #name="{ record }">
        <CellOrgNode :name="record.name" :type="record.orgType" />
      </template>
      <template #status="{ record }">
        <CellStatus :status="record.status" />
      </template>
      <template #orgType="{ record }">
        <CellDict :value="record.orgType" code="OrgTypeEnum" />
      </template>
    </ProTable>

    <OrgAddModal ref="OrgAddModalRef" @save-success="search" />
    <OrgDetailDrawer ref="OrgDetailDrawerRef" @change="search" />
  </ProPage>
</template>

<style lang="less" scoped></style>
